<template>
  <view class="container">
    <empty v-if="!storeInfo" :isLoading="isLoading" tips="数据加载中..."></empty>
    <block>
      <Location v-if="storeInfo" :storeInfo="storeInfo" />
    </block>
    <block>
      <Banner marginTop="25rpx" :itemStyle="options.bannerStyle" :params="options.bannerParam"
        :dataList="banner" />
    </block>
    <block>
      <view class="ti">公司简介</view>
      <view class="ti-t">
        <view class="ti-p">
			森发兔是图灵智检（北京）科技有限公司旗下的生发固发品牌，公司组建跨学科研发团队，联合知名高校与科研机构，将前沿科技转化为产品。以天然、安全、高效为研发理念，精选侧柏、何首乌、人参等珍贵中草药，运用现代萃取技术，研发出激活毛囊、改善头皮环境的核心产品，无激素添加，温和有效。
         </view>
		   <view class="ti-p">生产环节严格遵循国际质量标准，从原料到成品全流程把控，凭借先进设备与专业团队实现标准化生产。</view>
        <view class="ti-p">
          森发兔系列产品，针对不同脱发成因（脂溢性/产后/压力性等），生发固发，关爱女性健康。其产品定位和研发理念体现了公司对生发固发系列产品中天然成分与现代科技结合的重视。
        </view>
        <image class="ti-i" src="https://img-cdn-tc.dcloud.net.cn/uploads/nav_menu/11.jpg" ></image>
      </view>
    </block>
    <view class="kuai">
      <view class="ti">产品介绍</view>
      <view class="ti-h">
        <view class="ti-h-l">
          <view class="ti-h-l0">新品首发</view>
          <view class="ti-h-l1">NEW</view>
          <view class="ti-h-l2">8重植萃育发成分:黑灵芝多萜/红花酮/人参不定根胚状细胞提取物/侧柏叶提取物/何首乌根提取物 肌底焕活</view>
        </view>
        <image class="ti-h-i" mode="aspectFill" :src="b3"></image>
      </view>
    </view>
    <view class="kuai" style="padding: 20rpx; padding-top: 0;">
      <week-rolling-display :list="weeklist"></week-rolling-display>
    </view>
    <block>
      <Blank v-if="storeInfo" :itemStyle="options.blankStyle" />
    </block>

  </view>
</template>

<script>
import { setCartTabBadge, showMessage } from '@/utils/app'
import Location from '@/components/page/location'
import Banner from '@/components/page/banner'
import Blank from '@/components/page/blank'
import Empty from '@/components/empty'
import * as settingApi from '@/api/setting'
import * as Api from '@/api/page'
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp.js";
import config from '@/config'
import weekRollingDisplay from '@/components/week-rollingDisplay/week-rollingDisplay.vue'

const App = getApp()

export default {
  mixins: [MescrollCompMixin],
  components: {
    Location,
    Banner,
    Blank,
    Empty,
    weekRollingDisplay
  },
  data() {
    return {
      options: {
        "blankStyle": {
          "height": "5",
          "background": "#ffffff",
        },
        "bannerStyle": {
          "btnColor": "#ffffff",
          "btnShape": "round",
          "interval": 2.5,

        },
        "bannerParam": {
          "interval": 2000
        },
        "navStyle": {
          "background": "#ffffff",
          "rowsNum": "2",
        }
      },
      banner: [],
      storeInfo: null,
      isReflash: false,
      isLoading: false,
      b2: this.$ossUrl + '/index/b2.png',
      b3: this.$ossUrl + '/index/b3.png',
      weeklist: [
        {
          src: this.$ossUrl + '/index/a.png',
          t1: "侧柏叶提取物",
          t2: "抑制 5a- 还原酶，调节激素平衡，加速"
        },
        {
          src: this.$ossUrl + '/index/b.png',
          t1: "何首乌根提取物",
          t2: "提高毛囊生长代谢水平，持续赋能，强健毛囊"
        },
        {
          src: this.$ossUrl + '/index/c.png',
          t1: "红花酮",
          t2: "焕活毛囊细胞生长，超临界精粹促进抗氧化基"
        },
        {
          src: this.$ossUrl + '/index/d.png',
          t1: "苦橙叶精油",
          t2: "洁头皮 调节水油平衡"
        },
        {
          src: this.$ossUrl + '/index/e.png',
          t1: "黑灵芝多萜",
          t2: "强效逆转细胞炎症损伤，细胞液体发酵提取，"
        },
        {
          src: this.$ossUrl + '/index/f.png',
          t1: "人参不定根胚状细胞提取物",
          t2: "赋源毛囊基底，维稳再生，原生质体包裹人参"
        },
        {
          src: this.$ossUrl + '/index/g.png',
          t1: "香叶天竺葵提取物",
          t2: "抗炎舒缓 修复再生"
        },
        {
          src: this.$ossUrl + '/index/h.png',
          t1: "香根鸢尾根提取物",
          t2: "滋润头皮 抗衰防皱"
        }
      ]
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad({ storeId }) {
    storeId = storeId ? parseInt(storeId) : 0;
    if (storeId > 0) {
      uni.setStorageSync('storeId', storeId);
      uni.setStorageSync("reflashHomeData", true);
    } else {
      this.getPageData();
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const app = this;
    showMessage();
    setCartTabBadge();
    app.onGetStoreInfo();
    uni.getLocation({
      type: 'gcj02',
      success(res) {
        uni.setStorageSync('latitude', res.latitude);
        uni.setStorageSync('longitude', res.longitude);
        app.onGetStoreInfo();
      },
      fail(e) {
        // empty
      }
    })
  },

  methods: {

    /**
     * 加载页面数据
     * @param {Object} callback
     */
    getPageData(callback) {
      const app = this;
      app.banner = [{
        id: 1,
        image: this.$ossUrl + '/index/b1.png'
      }]
      Api.home()
        .then(result => {
          // app.banner = result.data.banner;
          uni.removeStorageSync("reflashHomeData");
          app.isReflash = false;
        })
        .finally(() => callback && callback())
    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 获取默认店铺
     * */
    onGetStoreInfo() {
      const app = this;
      settingApi.systemConfig()
        .then(result => {
          app.storeInfo = result.data.storeInfo;
          if (app.storeInfo) {
            uni.setStorageSync("storeId", app.storeInfo.id);
            uni.setStorageSync("merchantNo", app.storeInfo.merchantNo);
            // 判断是否需要更新页面
            let isReflash = uni.getStorageSync("reflashHomeData");
            app.isReflash = isReflash;
            if (isReflash === true) {
              app.getPageData();
            }
          }
        })
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    const app = this
    return {
      title: config.name,
      path: "/pages/index/index?" + app.$getShareUrlParams()
    }
  },

  /**
   * 分享到朋友圈
   * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
   * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
   */
  onShareTimeline() {
    const app = this
    const { page } = app
    return {
      title: config.name,
      path: "/pages/index/index?" + app.$getShareUrlParams()
    }
  }

}
</script>
<style lang="scss">
  .kuai {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20rpx;
  }
  .ti {
    font-size: 36rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: center;
    font-weight: 500;
    padding: 50rpx 0 20rpx 0;
  }
  .ti-t {
      padding: 0 20rpx;
      .ti-p {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 1.5;
        padding-bottom: 20rpx;
      }
      .ti-i {
        width: 100%;
        height: 210rpx;
        border-radius: 15rpx;
      }
    }
    .ti-h {
      margin-top: 20rpx;
      width: 100%;
      height: 250rpx;
      border-radius: 15rpx;
      box-shadow: 0px 2px 22px 0px #C8D3E190;
      display: flex;
      .ti-h-l {
        position: relative;
        width: 225rpx;
        padding: 20rpx;
        background-color: #fff;
        .ti-h-l0 {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
        }
        .ti-h-l1 {
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          line-height: 28rpx;
        }
        .ti-h-l2 {
          font-weight: 400;
          font-size: 18rpx;
          color: #666666;
          line-height: 26rpx;
        }
      }
     .ti-h-i {
        flex: 1;
        height: 250rpx;
      }
    }
</style>
